<template>
	<div class="cate-list">
		<div class="action-btn">
			<Button size="small" @click="showCreate()" type="success">添加分类</Button>
		</div>
		<Table border height="650" ref="tableList" row-key="id" :columns="tableColumn" :data="dataList" :loading="dataLoading">
			<template #type="{ row }">
				<Tag v-if="row.type" color="purple">单页</Tag>
				<Tag v-if="!row.type" color="blue">栏目</Tag>
			</template>
			<template #link_flag="{ row }">
				<Tag v-if="row.linkFlag" color="cyan">是</Tag>
				<Tag v-if="!row.linkFlag" color="orange">否</Tag>
			</template>
			<template #sort="{ row }">
				<InputNumber v-model="row.sort" size="small" :min="0" @on-change="sortDetail(row.id,$event)" />
			</template>
			<template #action="{ row }">
				<Button type="info" size="small" style="margin-right: 5px;float:left" @click="showEdit(row.id)">修改</Button>
				<Button type="error" size="small" @click="removeDetail(row.id)">删除</Button>
			</template>
		</Table>
	</div>
</template>

<script>
// import catelist from ".././data/catelist.json";
export default {
	name: 'CateList',
	data() {
		return {
			dataLoading:true,
			tableColumn: [
				{
					title: 'ID',
					key: 'id',
					width: 60,
				},
				{
					title: '名称',
					minWidth: 300,
					key: 'name',
					tree: true,
				},
				{
					title: '类型',
					slot: 'type',
					width: 100,
				},
				{
					title: '外链',
					slot: 'link_flag',
					width: 100,
				},
				{
					title: '排序',
					slot: 'sort',
					width: 150,
				},
				{
					title: '操作',
					slot: 'action',
					width: 130,
					align: 'left',
				}
			],
			dataList: [],
		}
	},
	// 组件
	components: {},
	// 计算
	computed: {},
	// 监听
	watch: {
		$route:{
			immediate: true,
			handler(newval,oldval){
				this.getTableList();
			}
		}
	},
	created() {},
	methods: {
		getTableList() {
			this.dataLoading = true;
			this.$api.cate.list().then(res => {
                this.dataList = res.result;
			}).finally(e=>{
				this.dataLoading = false;
            });
		},
		showCreate() {
			this.$router.push({
				path:'/category/create'
			});
		},
		showEdit(id) {
			this.$router.push({
				path:'/category/update',
				query:{
					id:id
				}
			});
		},
		removeDetail(id) {
			this.$Modal.confirm({
				title: '警告',
				content: '<p>此操作不可恢复，三思而后行</p>',
				onOk: () => {
					this.$api.cate.remove({ detailId: id }).then(res => {
                        this.getTableList();
					});
				}
			});
		},
		sortDetail(id, sort) {
			this.$api.cate.sort({ id: id, sort: sort }).then(res => {
                this.getTableList();
			});
		}
	}
}
</script>
